<template>
  <el-scrollbar height="100vh">
    <div class="container">
      <el-affix :offset="1">
        <h1 class="title">tabIndex 点击激活地图</h1>
      </el-affix>
      <div tabindex="2" id="map" class="map-x" ref="map"></div>
      <dl>
        <p>注意要素</p>
        <dt>通过给地图容器设置 tabindex="2" 来控制默认不会选中地图。</dt>
        <dt><p>只有当鼠标点击地图时，才能进行缩放等操作。</p></dt>
        <dt>如果没选中地图，即使在地图上滑动滚轮，也不会操作到地图。</dt>
      </dl>
    </div>
  </el-scrollbar>
</template>
<script>
import { onMounted, ref } from 'vue-demi'
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
export default {
  setup () {
    const map = ref(null)
    const init = () => {
      map.value = new Map({
        target: map.value,
        layers: [
          new Tile({
            title: '谷歌地图',
            source: new XYZ({
              url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=ab47b4591ab6e07e0530606eca973edd'
            })
          })
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [116.41400, 39.91500],
          zoom: 8
        })
      })
    }
    onMounted(() => {
      init()
    })
    return {
      map
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../css/main.scss';
</style>
